<template>
  <view style="width: 100%;height: 100vh; background-color: #f2f1f1;padding-bottom: 250rpx;">
    <!-- top -->
    <view class="top">
      <view class="top_t" @click="addressFn">
        <view class="" style="display: flex;align-items: center;">
          <image src="/static/lzl/addess@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
          <view v-if="!addressObj" class="title">请选择地址</view>
          <view v-else class="title">
            <view class="title2">{{ addressObj.consignee }} {{ addressObj.phone }}</view>
            <view class="title3">{{ addressObj.province_name }} {{ addressObj.city_name }} {{ addressObj.area_name }} {{ addressObj.address }}</view>
          </view>
        </view>
        <image src="/static/lzl/you@2x.png" style="height: 48rpx;width: 48rpx;" mode=""></image>
      </view>
      <!-- 商品 -->
      <view class="top_center">
        <view class="picture" v-for="(ite, ind) in preObj.new_goods_list" :key="index">
          <view class="" style="margin-right: 50rpx;"><image :src="ite.detail.image" style="width: 200rpx;height: 200rpx;" mode=""></image></view>
          <view class="" style="width: 350rpx;">
            <view class="picture_top">{{ ite.detail.title }}</view>
            <view class="picture_top_t">{{ ite.detail.current_sku_price.goods_sku[1] }}</view>
            <view class="picture_bottom_b">
              <view class="picture_top_t">{{ ite.detail.colorName }}</view>
              <!--  <view class="yanse" :style="{ backgroundColor: ite.detail.current_sku_price.goods_sku[0] }"></view> -->
            </view>
            <view class="picture_bottom">
              <view class="">￥{{ ite.pay_price }}</view>
              <view class="num">×{{ ite.goods_num }}</view>
            </view>
          </view>
          <!--  -->
        </view>
      </view>
      <!-- 配送方式 -->
      <view class="" style="display: flex;justify-content: space-between;align-items: center;margin-top: 16rpx;">
        <view class="">配送方式</view>
        <view class="" style="display: flex;align-items: center;">
          <view class="">物流快递</view>
          <image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 中间的部分 -->
    <view class="" style="background-color: #fff;padding: 20rpx 32rpx;margin-top: 10rpx;">
      <!-- 总额 -->
      <view class="" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 36rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">商品总额</view>
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: bold;">￥{{ preObj.total_amount }}</view>
      </view>
      <!-- 优惠 -->
      <view class="" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 36rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">会员优惠</view>
        <view class="" style="color: #ADADAA;font-size: 28rpx;font-weight: 500;">￥{{ preObj.vip_preferential }}</view>
      </view>
      <view class="" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 36rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">活动优惠</view>
        <view class="" style="color: #ADADAA;font-size: 28rpx;font-weight: 500;">￥{{ preObj.activity_discount_money }}</view>
      </view>
      <!-- 运费 -->
      <view class="" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 36rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">运费</view>
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: bold;">￥{{ preObj.dispatch_discount_money }}</view>
      </view>
      <!-- 备注 -->
      <view class="" style="display: flex;justify-content: space-between;align-items: center;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">备注</view>
        <input type="text" v-model="input" placeholder="请输入备注内容" style="color: #ADADAA;text-align: right;width: 500rpx;" name="" id="" />
      </view>
    </view>
    <!-- 下方的内容 -->
    <!-- top -->
    <view class="btn1" @click="tiaozhuan" v-if="userInfo.group_id == 1">点击注册会员，可尊享会员专属权益</view>
    <view class="btn">
      <view class="left">
        <view class="left_he">合计:</view>
        <view class="left_price">￥{{ preObj.total_amount }}</view>
      </view>
      <!-- 满减活动 -->
      <view class="center" v-if="false">满300包邮</view>
      <view class="tijiao" @click="tijiao">提交订单</view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  data() {
    return {
      input: '',
      addressObj: {},
      objOrder: {},
      preObj: {},
      userinfo: {},
      data: 1
    };
  },
  onUnload() {
    uni.removeStorageSync('address_id');
  },
  onShow() {
    let address = uni.getStorageSync('address_id');
    if (address) {
      this.addressObj = address;
    } else {
      this.defaultsAdd();
    }
  },
  onLoad(options) {
    this.data = options.data;
    // 地址获取
    let obj = JSON.parse(options.obj);
    this.objOrder = obj;
    // setTimeout(() => {
    this.orDer(obj);
    // }, 500);
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    ...mapActions('user', ['AsyncUserinfo']),
    // 跳转到个人中心
    tiaozhuan() {
      uni.navigateTo({
        url: '/pages/my/userinfo/userinfo'
      });
    },
    // 获取默认地址
    async defaultsAdd() {
      let n = await this.$api.defaults();
      this.addressObj = n.data;
    },
    // 计算订单
    async orDer(obj) {
      if (this.data == 1) {
        let n = await this.$api.pre({ ...obj, address_id: this.addressObj.id || 0 });
        this.preObj = n.data;
        this.preObj.new_goods_list.forEach(item => {
          console.log(item, 77777777777777777777);
          let color = item.detail.current_sku_price.goods_sku_text.split('#');
          let col = '#' + color[1];
          item.detail.color = col;
          item.detail.colorName = color[0];
        });
      } else {
        let n = await this.$api.pre({ ...obj, address_id: this.addressObj.id || 0, coupons_id: 0 });
        this.preObj = n.data;
        this.preObj.new_goods_list.forEach(item => {
          let color = item.detail.current_sku_price.goods_sku_text.split('#');
          let col = '#' + color[1];
          item.detail.color = col;
          item.detail.colorName = color[0];
        });
      }
      this.userinfo = await this.AsyncUserinfo();
    },
    // 点击去选择地址
    addressFn() {
      uni.navigateTo({
        url: '/pages/address/address?id=1'
      });
    },
    // 点击提交订单
    async tijiao() {
      this.objOrder.goods_list.forEach(item => {
        item.dispatch_type = 'express';
      });
      if (this.data == 1) {
        let obj = {
          ...this.objOrder,
          remark: this.input,
          invoice: {},
          vip_preferential: this.preObj.vip_preferential,
          address_id: this.addressObj.id,
          buy_type: 'alone',
          groupon_id: 0
        };
        let objOrder = JSON.stringify(obj);
        uni.navigateTo({
          url: '/pages/payRustl/payRustl?obj=' + objOrder
        });
      } else {
        let obj = { ...this.objOrder, remark: this.input, invoice: {}, vip_preferential: this.preObj.vip_preferential, address_id: this.addressObj.id, coupons_id: 0 };
        let objOrder = JSON.stringify(obj);
        uni.navigateTo({
          url: '/pages/payRustl/payRustl?obj=' + objOrder
        });
      }
    }
  }
};
</script>

<style lang="scss">
.btn1 {
  position: fixed;
  width: 100%;
  color: #8a7229;
  font-size: 28rpx;
  bottom: 130rpx;
  height: 96rpx;
  background: #fcf6e3;
  text-align: center;
  line-height: 96rpx;
  left: 0;
}
.btn {
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 130rpx;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
  .left {
    .left_he {
      color: #0a0a09;
      font-size: 32rpx;
      font-weight: bold;
    }
    .left_price {
      color: #8a7229;
      font-weight: 500;
      font-size: 32rpx;
    }
  }
  .center {
    color: #adadaa;
    font-size: 24rpx;
  }
  .tijiao {
    width: 230rpx;
    height: 84rpx;
    line-height: 84rpx;
    background: linear-gradient(145deg, #d3cdab 0%, #c3b27f 100%);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }
  .left {
    display: flex;
    align-items: center;
  }
}
* {
  box-sizing: border-box;
}
.top {
  padding: 20rpx 32rpx;
  width: 100%;
  // height: 116rpx;
  background-color: #fff;
  .top_center {
    margin-top: 48rpx;
  }
  .top_t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      .title2 {
      }
      .title3 {
        width: 500rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 1; //行数
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.picture {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  // border-bottom: 2rpx solid #f2f1f1;
  .picture_top {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #0a0a09;
  }
  .picture_top_t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 10rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #adadaa;
  }
  .picture_bottom_b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    // margin-top: 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
    display: flex;
    align-items: center;
    .yanse {
      border-radius: 24rpx;
      width: 48rpx;
      height: 48rpx;
      background-color: red;
    }
  }
  .picture_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #c3b27f;
  }
  .num {
    font-size: 24rpx;
    margin-right: -50rpx;
    z-index: 99999;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #cccccc;
  }
}
</style>
